<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>bookLib</title>
    <meta name="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
    <!-- Libs or abstract classes -->
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/DOM.js"></script>
    <!-- WebControls  -->
    <script type="text/javascript" src="js/logger.js"></script>
    <script type="text/javascript" src="js/bookManager.js"></script>
    <script type="text/javascript" src="js/userManager.js"></script>
    <script type="text/javascript" src="js/searcher.js"></script>
    <script type="text/javascript" src="js/librarian.js"></script>
    <script type="text/javascript" src="js/defaultPage.js"></script>
    <script type="text/javascript" src="js/searchPage.js"></script>
    <script type="text/javascript" src="js/profilePage.js"></script>
    <script type="text/javascript" src="js/loginBox.js"></script>
    <script type="text/javascript" src="js/signUpBox.js"></script>
    <script type="text/javascript" src="js/bookLib.js"></script>
  </head> 
  <body>
    <div class="header">      
      <div class="layout">
	<div class="logo"> </div>
	<div class="userMenu right">
	  <span class="clickable" id="userName">SignUp</span>
	  <span class="clickable" id="loginAction">Login</span>
	  <span class="clickable" id="setting">Setting</span>
	  <div class="headerSearchBox">
	    <input type="text" name="keyword" value="keyword" class="headerSearchInput" id="headerSearchInput"/>
	    <ul class="dropDownHint" id="headerDropHint"> </ul>
	    <div class="searchIcon" id="headerSearchSummit"> </div> 
	  </div>
	</div>
      </div>
    </div>
    <div class="body">
      <!-- this is #body is for ajaxUse -->
      <div class="layout" id="body">
	<div class="header tab"><div class="left"><div class="right"><div class="center"> 
		<h1>Profile</h1>
	</div></div></div> </div>
	<div class="body">
	  <div class="upDownExpandBody grayRoundBody"> <div class="up"> <div class="down"> <div class="center">
		  <div class="info">
		    <div class="username">
		      <span class="attrName">Username:</span>
		      <span id="profileUsername">yourname</span> 
		    </div>
		    <div class="mailbox">
		      <span class="attrName">Mailbox:</span>
		      <span id="profileMailbox">yourname@hustunique.com</span> 
		    </div>
		    <div class="realname">
		      <span class="attrName">Realname:</span>
		      <span id="profileRealname">your realname</span>
		    </div>
		  </div>
		  <!-- start checkoutList -->
		  <div class="checkoutList">
		    <h1>Your Current Checkouts</h1>

		    <div class="listItem">
		      <div class="listTitle silverTitle">
			<h2 class="bookName">bookName</h2>
		      </div>
		      <div class="listContent">
			<span class="attrName">bookCode:</span>
			<span>something</span>
			<span class="attrName">bookLocation:</span>
			<span>somewhere</span>
			<span class="attrName">bookPublisher:</span>
			<span>somebody</span>
			
			<div class="actions">
			  <div class="leftRightExpandBody orangeButton clickable" id="returnThis" code="S006"><div class="left"><div class="right"><div class="center"> 
				  <span>Return Me!</span>
			  </div></div></div></div>
			</div>
		      </div>
		    </div>


		  </div>
		  <!-- end checkoutList -->
		  <!-- start checkoutHistory -->
		  <div class="checkoutHistoryList">
		    <h1>Your Part of your CheckoutHistory</h1>
		    <div class="listItem">
		      <div class="listTitle silverTitle">
			<h2 class="bookName">bookName</h2>
		      </div>
		      <div class="listContent">
			<span class="attrName">bookCode:</span>
			<span>something</span>
			<span class="attrName">bookLocation:</span>
			<span>somewhere</span>
			<span class="attrName">bookPublisher:</span>
			<span>somebody</span>
			
			<div class="actions">
			  <div class="leftRightExpandBody orangeButton clickable" id="returnThis" code="S006"><div class="left"><div class="right"><div class="center"> 
				  <span>Return Me!</span>
			  </div></div></div></div>
			</div>
		      </div>
		    </div>

		  </div>
		  <!-- end checkoutHistory -->
	  </div> </div> </div> </div>
	</div>
      </div>
    </div>
    <div class="footer">
      <div class="layout">
	<span>©Copyright UniqueStudio MinghanWu</span>
      </div>
    </div>
    <div class="popBox" id="signUpBox">
      <div class="username formDiv">
      <label for="signUpUsername">Username:</label><input type="text" name="username" value="" id="signUpUsername">
      </div>
      <div class="password formDiv">
	<label for="signUpPassword">Password:</label>
	<input type="password" name="password" value="" id="signUpPassword"/> 
      </div>
      <div class="passwordConfirm formDiv">
	<label for="signUpPasswordConfirm">Confirm:</label>
	<input type="password" name="passwordConfirm" value="" id="signUpPasswordComfirm" />
      </div>
      <div class="mailbox formDiv">
	<label for="signUpMailbox">Mailbox:</label>
	<input type="text" name="mailbox" value="" id="signUpMailbox" />
      </div>
      <div class="realname formDiv">
	<label for="signUpRealname">Realname:</label>
	<input type="text" name="realname" value="" id="signUpRealname"/>
      </div>
      <div class="actions">
	<button id="signUpButton" class='clickable button'>SignUp</button>
	<!--div class="clickable button orange">
	  <span>Login</span>
	</div-->
      </div>
    </div>
  </body>
</html>
